<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登入 - SharpDoc</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/frame/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/customer_admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/customer_login.css}" media="all">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>SharpDoc</h2>
            <p>网络文库共享平台</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                       for="LAY-user-login-username"></label>
                <input type="text" name="phone" id="LAY-user-login-username" lay-verify="phone" placeholder="手机号"
                       class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                       for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password" lay-verify="required"
                       placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码" checked>
                <a th:href="@{/customer/forgetPage}" class="layadmin-user-jump-change layadmin-link"
                   style="margin-top: 7px;">忘记密码？</a>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
                <label>社交账号登入</label>
                <a href="javascript:"><i class="layui-icon layui-icon-login-qq"></i></a>
                <a href="javascript:"><i class="layui-icon layui-icon-login-wechat"></i></a>
                <a href="javascript:"><i class="layui-icon layui-icon-login-weibo"></i></a>

                <a th:href="@{/customer/registerPage}" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/frame/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/frame/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user'], function () {
        const $ = layui.$;
        // 从cookie中读取保存的手机号与密码
        $(function () {
            if (getCookie('sharpdoc_phone') && getCookie('sharpdoc_pass')) {
                $('#LAY-user-login-username').val(getCookie('sharpdoc_phone'));
                $('#LAY-user-login-password').val(getCookie('sharpdoc_pass'));
            }
        });

        const admin = layui.admin;
        const form = layui.form;

        form.render();

        //提交
        form.on('submit(LAY-user-login-submit)', function (obj) {
            // 处理记住密码
            if (obj.field.remember) {
                setCookie('sharpdoc_phone', $('#LAY-user-login-username').val(), 7);
                setCookie('sharpdoc_pass', $('#LAY-user-login-password').val(), 7);
            } else {
                delCookie('sharpdoc_phone');
                delCookie('sharpdoc_pass');
            }

            //请求登入接口
            admin.req({
                url: '[[@{/customer/login}]]'
                , data: obj.field
                , type: 'post'
                , done: function (res) {
                    if (res.issuccess) {
                        //登入成功的提示与跳转
                        layer.msg('登入成功', {
                            //offset: '15px'
                            icon: 1
                            , time: 2000
                        }, function () {
                            // 跳转到主页
                            location.href = '[[@{/}]]';
                        });
                    } else {
                        //登入失败
                        layer.msg(res.msg, {
                            //offset: '15px'
                            icon: 2
                            , time: 2000
                        });
                    }
                }
            });
        });
    });
</script>


<script>
    //删除cookie
    function delCookie(name) {
        setCookie(name, null, -1);
    }

    //获取cookie
    function getCookie(name) {
        const reg = RegExp(name + '=([^;]+)');
        const arr = document.cookie.match(reg);
        if (arr) {
            return arr[1];
        } else {
            return '';
        }
    }

    //设置cookie
    //参数：cookie名字，cookie值，cookie保存时长
    function setCookie(name, value, day) {
        const date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = name + '=' + value + ';expires=' + date;
    }
</script>
</body>
</html>